/******************* Common Styles *******************/

.form-check-input[type=checkbox]:not([role="switch"]) {
    border-radius: 2px !important;
}

.form-check-input:focus,
.form-control:focus {
    box-shadow: none !important;
}

.form-control.default,
.form-control.valid {
    border-color: var(--grey-medium);
}

.form-control.input-constrained,
.form-control.invalid {
    border-color: var(--danger);
}

.warning {
    border-color: var(--gold);
}

.form-control.input-constrained:focus,
.form-control.invalid:focus {
    border-color: var(--rusty-red);
}

.form-control.default:focus,
.form-control.valid:focus {
    border-color: var(--soft-blue);
}

.form-check-input.constrained, 
.form-check-input.constrained:focus, 
.form-check-input.check-constrained, 
.form-check-input.check-constrained:focus {
    border-color: var(--danger);
}

.form-check-input.constrained:hover, 
.form-check-input.check-constrained:hover {
    border-color: var(--rusty-red);
}

.form-check-input.invalid:checked, 
.form-check-input.check-invalid:checked {
    border-color: var(--danger);
    background-color: var(--danger);
}

.form-check-input.invalid:hover, 
.form-check-input.check-invalid:hover {
    border-color: var(--rusty-red);
    background-color: var(--rusty-red);
}

.form-check-input.selected:checked, 
.form-check-input.check-selected:checked {
    border-color: var(--grey-dark);
    background-color: var(--grey-dark);
}

.form-check-input.selected:hover, 
.form-check-input.check-selected:hover {
    border-color: var(--grey-medium);
    background-color: var(--grey-medium);
}

.form-check-input.default:focus,
.form-check-input.default,
.form-check-input.check-default:focus,
.form-check-input.check-default {
    border-color: var(--grey-dark);
}


.labelCheck {
    padding: 3px !important;
}

.labelHorizontal {
    float: right;
}

.feedback-icon {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.inputStatus {
    width: 100%;
    align-self: stretch;
    flex-grow: 0;
    justify-content: right;
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inputStatus.invalid {
    color: var(--danger);
    background-color: transparent;
}

.required-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--danger);
}

.row-default {

}

.invalid > td,
.row-invalid > td,
.row-selected > td {
    background-color: var(--grey-lighter);
}

.row-disabled > td {
    cursor: not-allowed !important;
}

/******************* Dropdown Styles *******************/

.grt-Dropdown-control {
    position: relative;
    width: 100%;
}

.grt-Dropdown-control .feedback-icon {
    top: 30%;
    right: 35px;
}

.custom-dropdown .btn-default {
    border-color: var(--grey-medium);
    --bs-btn-active-bg: white;
    width: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.custom-dropdown .btn-default > span {
    width: 100%;
    display: flex;
    padding-right: 15px
}

.custom-dropdown .btn-default > span > span {
    width: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.custom-dropdown .btn-default:hover {
    border-color: var(--soft-blue);
    background-color: white;
}

.custom-dropdown .btn-default.invalid {
border-color: var(--danger);
}

.custom-dropdown .btn-default.invalid:hover {
    border-color: var(--rusty-red);
}

.custom-dropdown .dropdown-item.invalid
.custom-dropdown .dropdown-item.selected {
    background-color: var(--grey-lighter);
}

.custom-dropdown .dropdown-item:active {
    color: black;
    background-color: var(--grey-lighter);
}

.custom-dropdown span .fa {
    padding-top: 3px;
}

.custom-dropdown li.active {
    background-color: var(--grey-lighter);
}

.custom-menu {
    width: 100%;
    max-height: 284px;
    overflow-y: scroll;
}

.custom-toggle::after {
    display: none;
}

.custom-toggle::before {
    position: absolute; 
    right: 4px; 
    content: '\f078 ';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 16px;
    font-weight: normal;
}

.custom-dropdown .dropdown-menu .dropdown-item {
    width: 100%;
    padding-right: 5px;
}

.custom-dropdown .dropdown-menu .dropdown-item > span {
    width: 100%;
    display: flex;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.custom-dropdown .dropdown-menu .dropdown-item > span > span {
    width: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/******************* ListBox Styles *******************/
.grt-listBoxControl-list {
    border-width: 0px !important;
    border-style: none !important;
    position: relative;
    text-align: left;
}

.grt-listBoxControl-div {
    width: 100%;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-radius: 4px;
    border: solid 1px var(--grey-medium);
    background-color: var(--white);
}

table.grt-listBoxControl-table {
    cursor: pointer;
    margin-bottom: 0;
}

table.grt-listBoxControl-table > td {
    padding: 0;
}

.grt-listBoxControl-table td {
    padding: 10px;
    height: 30px;
}

.grt-listBoxControl-table td:hover {
    background-color: var(--grey-lighter);
}

.grt-listBoxControl-table .row-default {
    background-color: #ffffff;
}

.grt-listBoxControl-table.table tr td {
    border-top-width: 0;
    border-bottom-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/******************* RadioButton Styles *******************/
.grt-RadioButtonControl > .form-check > input {
    height: 16px;
    width: 16px;
    display: flex;
    margin: 6px 4px 4px 4px;
}

.grt-RadioButtonControl-item { /* Overrides Boostraps block */
    display: inline;
}

.grt-RadioButtonControl > div > input /* This is the radio button itself - Overrides Bootstrap Block */ {
    display: inline;
    margin: 0 4px 0 4px;
}

.grt-RadioButtonControl > div /* This is the radio button wrapper & Bootstrap can apply scrollbars - Overrides Bootstrap Scrollbars */ {
    overflow-y: hidden;
}

.grt-RadioButtonControl > div.form-check{
    padding-left: 0 !important;
}

/******************* Checkbox Styles *******************/

.grt-CheckBoxControl > div.form-check {
    padding-left: 0 !important;
}

.grt-CheckBoxControl > .form-check > input {
    height: 16px;
    width: 16px;
    display: flex;
    margin: 4px 4px 4px 4px;
    border-radius: 2px;
}

.grt-CheckBox-Bool > .form-check > input {
    height: 16px;
    width: 16px;
    display: flex;
    margin-left: 4px;
    margin-top: 0;
    border-radius: 2px;
}


.grt-CheckBox-Bool > div {
    display: inline-block;
    margin-bottom: 4px;
    padding-right: 20px;
    padding-left: 0;
}

.grt-CheckBox-Bool {
    width: auto;
}

/******************* TextArea Styles *******************/

.grt-TextArea-Container {
    position: relative;
}

.grt-TextArea-Container .feedback-icon {
    top: 15%;
    right: 10px;
}

.grt-TextArea-Container > textarea {
    height: 96px;
}

/******************* TextBox Styles *******************/

.grt-TextBox-Container {
    position: relative;
}

.grt-TextBox-Container .feedback-icon {
    top: 40%;
    right: 10px;
}

/******************* Numeric Styles *******************/

.grt-Numeric-Container {
    position: relative;
}

.grt-Numeric-Container > input {
    text-align: right;
}

.grt-Numeric-Container > input.leftTextAlign {
    text-align: left;
}

.grt-Numeric-Container > input.invalid:not(leftTextAlign) {
    padding-right: 35px;
}

.grt-Numeric-Container .feedback-icon.right {
    right: 10px;
    top: 32%;
}

.grt-Numeric-Container .feedback-icon.left {
    left: 10px;
    top: 40%;
}

/******************* Grid Styles *******************/

.grt-table thead > tr > th:first-child,
.grt-table tbody > tr > td:first-child {
    width: 30px;
}

.grt-table thead > tr > th:nth-child(2),
.grt-table tbody > tr > td:nth-child(2) {
    width: 30px;
}

.table.grt-table > tbody > tr > td[data-type="3"]:not(last-child) {
    padding-right: 1.5rem;
}

.table.grt-table > tbody > tr > td[data-type="3"]:last-child {
    padding-right: 2.5rem;
}

.grt-table thead > tr > th {
    background-color: var(--soft-blue) !important;
    box-shadow: none;
    color: var(--white);
    font-weight: 400;
}

.grt-table tbody > tr.invalid > td {
    background-color: var(--grey-400);
}

.grt-table tbody > tr.invalid {
    border-bottom: 3px solid var(--danger) !important;
    border-top: 3px solid var(--danger) !important;
}

.grt-table-row > div.form-check > .form-check-input {
    height: 16px !important;
    width: 16px !important;
    border-radius: 2px !important;
}

.grt-table-row {
    border-bottom: 1px solid var(--grey-light);
    cursor: pointer;
}

/******************* Date Styles *******************/
.grt-Date-Container {
    position: relative;
}

.grt-Date-Container > .input-group > button {
    border-top: 1px solid var(--grey-medium);
    border-bottom: 1px solid var(--grey-medium);
    border-right: 1px solid var(--grey-medium);
    border-left: 0;
}

.grt-Date-Container > .input-group > *:hover,
.grt-Date-Container > .input-group > *:focus {
    border-color: var(--soft-blue);
}

.grt-Date-Container > .input-group > input {
    border-right: 0;
    z-index: 1;
}

.grt-Date-Container > .input-group > button.invalid {
    border-color: var(--danger);
}

.grt-Date-Container > .input-group > *.invalid:hover,
.grt-Date-Container > .input-group > *.invalid:focus {
    border-color: var(--rusty-red);
}

.grt-Date-Container .feedback-icon {
    top: 27%;
    right: 50px;
    z-index: 100;
}

/******************* StandardButton Styles *******************/

button.ClearPageButton::before,
button.ClearAllPagesButton::before {
    content: '\f12d ';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 16px;
    font-weight: 300;
    padding-right: 7px;
    width: 28px;
}

button.CloseApplicationButton::before {
    content: '\f00d ';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 16px;
    font-weight: 300;
    padding-right: 7px;
    width: 28px;
}

button.SaveApplicationButton::before {
    content: '\f0c7 ';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 16px;
    font-weight: 300;
    padding-right: 7px;
    width: 28px;
}

button.NavigateButton::before {
    content: '\f14e ';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 16px;
    font-weight: 300;
    padding-right: 7px;
    width: 28px;
}

button.ClearControlButtonIcon,
button.ClearComponentButtonIcon {
    background-color: transparent;
    border: 0;
    padding: 0;
}

.straight-line-alignment {
    display: flex;
    align-items: center;
    justify-content: center;
}

/******************* Container Styles *******************/
.appBuilderContainerLabel {
    padding-bottom: 6px;
}

.DefaultContainer,
.GroupBoxContainerStyle,
.FormContainerStyle {
    background-color: white !important;
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
}

.DefaultContainer-dark {
    background-color: var(--grey-lighter) !important;
    color: var(--grey-dark) !important;
}

.ExpanderStyle,
.PageStyle {
    margin: 5px;
} 

/******************* Summary Control Styles *******************/
.summary-grid > thead > tr > th {
    background-color: var(--soft-blue) !important;
    box-shadow: none;
    color: var(--white);
    font-weight: 400;
}

.summary-grid thead th:first-child {
    padding-left: 20px;
}

.summary-grid tbody td:first-child {
    padding-left: 20px;
    text-decoration: none !important;
    color: var(--marine-blue) !important;
}

/******************* Hierarchy Summary Grid Control Styles *******************/

.hierarchy-summaryGrid > thead > tr > th {
   font-weight: 400;
}

.hierarchy-summaryGrid-numeric {
    text-align: right; 
}

.hierarchy-summaryGrid-numericNegative {
    color: #666666;
}

/******************* Label Styles *******************/

.guruLabelComponent {
    vertical-align: middle;
}

.appBuilderLabel.text-end,
.guruLabelComponent.text-end {
    margin-top: 10px;
}

/******************* SBOM Styles *******************/

.grt-table.sbom-sr-header thead > tr > th {
    background-color: var(--very-light-blue) !important;
    color: var(--flat-blue) !important;
    font-weight: bold;
}

.grt-table.sbom-sr-header thead > tr > th:first-child,
.grt-table.sbom-sr-header tbody > tr > td:first-child {
    padding-left: 10px;
}

.grt-table.sbom-sr-header tbody > tr > td:first-child {
    color: var(--flat-blue) !important;
}

.replace-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: red !important;
    padding: 10px;
    text-align: center;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.dataTables_wrapper .grt-table.table tr.replaced,
.dataTables_wrapper .grt-table.table tr td.replaced {
    border-bottom-width: 0 !important;
    border-bottom-style: none !important;
}

tr.replacedby {
    border-top-width: 0 !important;
    border-top-style: none !important;
}

.grt-table.dataTable thead > tr > th {
    background-color: var(--very-light-blue) !important;
    color: var(--flat-blue) !important;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

.table.dataTable th.sorting,
.table.dataTable th.sorting_asc,
.table.dataTable th.sorting_desc {
    position: relative !important;
    padding-right: 25px !important;
    cursor: pointer !important;
}

.table.dataTable th.sorting:after,
.table.dataTable th.sorting_asc:after,
.table.dataTable th.sorting_desc:after {
    color: var(--grey-medium) !important;
    font-family: FontAwesome !important;
    font-weight: normal !important;
    padding-left: 5px !important;
    position: absolute;
    opacity: 1 !important;
}

.table.dataTable th.sorting.sorting_asc:after {
    content: '\f160 ' !important;
    transform: none !important;
}

.table.dataTable th.sorting.sorting_desc:after {
    content: '\f161 ' !important;
    transform: none !important;
}

.table.dataTable th.sorting:after {
    content: '\f0ec ' !important;
    transform: rotate(90deg) !important;
}

.navbar-stretch {
    background: white !important;
    width: 100%; 
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000; 
    margin: 0 !important;
}

tr .absolute-div {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dataTables_wrapper .grt-table.table tr.replacedRow {
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
}

.dataTables_wrapper .grt-table.table tr td.replacedCell {
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
}

.custom-class {
    display: flex;
    justify-content:end;
}

.placement-bottom {
    position: absolute;
    bottom : 0
}

.topRow {
    height: 40%;
    display: grid;
    align-items: center;
}

.bottomRow {
    height: 40%;
}

.middleRow {
    height: 20%;
}

.replaceRow {
    height: 140px;
}

.dataTables_wrapper .grt-table.table tr td.replaceSeparator {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/***************** from-switch *********************/

.frmQuoteCompare .form-switch .form-check-input[type=checkbox],
#SalesBOMControl .form-switch .form-check-input[type=checkbox],
#CompareTableDiv .form-switch .form-check-input[type=checkbox] {
    border-radius: 2em;
    border-color: var(--bs-body-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.50%29'/%3e%3c/svg%3e")
}

.frmQuoteCompare .form-switch .form-check-input:checked,
#SalesBOMControl .form-switch .form-check-input:checked,
#CompareTableDiv .form-switch .form-check-input:checked {
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}